<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <!-- import CSS -->
    <script src="./static/js/vue3.js"></script>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/index.css">
    <!-- import JavaScript -->
    <script src="./static/js/markdown-it.min.js"></script>
    <script src="./static/js/jquery-3.7.1.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/js/jquery-ui.js"></script>
    <title>MarGco</title>
</head>
<body>
<div id="app">
    <div class="topNavigationBar">
        <div class="tb-left">
            <div class="marGcoIcon">MARGCO</div>
            <div class="marGcoNavigationBarButton" v-for="item in topBars" @click="goTo(item.link)">{{item.name}}</div>
        </div>
        <div class="tb-right" v-if="isLogin">
            <img alt="icon" class="userIcon" src="./static/img/CokeGGts.jpg">
        </div>
        <div class="tb-right" v-else>
            <button class="marGcoButton" @click="goTo('./certified.html')">
                {{userButtonText[0]}}
            </button>
            <button class="marGcoButton button-cyan" @click="goTo('./certified.html')">
                {{userButtonText[1]}}
            </button>
        </div>
    </div>
    <div class="card" id="mainLeftContainer"></div>
    <div id="mainRightContainer">
        <h1 class="gradientText" style="font-size: 50px">{{greetingsTitle}}</h1>
        <h1 class="gradientText">{{greetingsDescription}}</h1>
        <div class="helloElement1"></div>
        <div class="helloElement2"></div>
        <div class="helloElement3"></div>
        <h2 class="helloContext">{{helloContext}}</h2>
        <div class="notificationPanel">
            <div class="notification">
                <div class="notiglow"></div>
                <div class="notiborderglow"></div>
                <div class="notititle">{{notificationText[0]}}</div>
                <div class="notibody">{{notificationText[1]}}</div>
                <div class="notibody">{{notificationText[2]}}</div>
                <div class="notibody">{{notificationText[3]}}</div>
            </div>
            <div class="notification">
                <div class="notiglow"></div>
                <div class="notiborderglow"></div>
                <div class="notititle">Made By</div>
                <div class="notibodyList">
                    <div class="notibody iconItems" @click="goTo(item.link)" v-for="item in madeBy">
                        <div class="">{{item.name}}</div>
                        <img :src="item.img" alt="img" class="madeByIcon">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="hidden" hidden="hidden">
    <h3 id="helloItem">HelloWorld</h3>
</div>
</body>
<script src="./static/js/index.js"></script>
</html>